<!DOCTYPE html
		PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Unobtrusive Accessible jQuery Modal</title>

	<script src="../../_jquery/jquery-1.3.2.js"></script>
	<script src="../../viewport/viewport.jquery.js"></script>
	<script src="../../overlay/overlay.jquery.js"></script>
	<script src="../modal.jquery.js" type="text/javascript"></script>

	<!-- script src="modal.example.js" type="text/javascript">< /script -->

	<!-- script src="../../slideshow/slideshow.jquery.js" type="text/javascript">< /script>< !-- Used for slideshow -->

	<style type="text/css">
		#modal_object {
			background-color: #000;
			}

		.modal_content_outer {
			background-color: #fff;
			}
	</style>

	<script>
		$(function() {
			$('h2').showDomModal();
			$('form, a').modal();
		});
	</script>
</head>
<body>
	<h2>Unobtrusive Accessible jQuery Modal</h2>

	<p id="thumbs"><a href="images/image2.jpg"><img src="images/image2t.jpg" width="100" height="75" /> - Load image</p>

	<p id="login"><a href="login.example.html">Login - ajax</a></p>

	<p id="login2"><a href="javascript:;">Login - HTML is loaded (click triggers 2 second a timer)</a></p>

	<div id="login_form">
		<form action="login_successful.example.html" class="login_form">
			<fieldset>
				<label for="username">Username:</label> <input type="text" name="username" id="username" />
				<label for="password">Password:</label> <input type="password" name="password" id="password" />
				<input type="submit" value="Submit" />
			</fieldset>
		</form>
	</div>

	<p id="slideshow_link"><a href="../../slideshow/example/slideshow.example.html">Slideshow - ajax + extra functionality loaded after content is loaded</a></p>

	<div id="hidden">
		<p>Some Content</p>
	</div>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
	<p>Some Content</p><p>Some Content</p><p>Some Content</p><p>Some Content</p>
</body>
</html>